<template>
	<view class="module-block" >
		<view class="module-info">
			<view class="module-title">车辆信息</view>
			<view class="module-group">
				<view class="group-item" v-for="(item,index) in suits" :key="index" v-if="item.cars.length">
					<view class="ticket-name">
						<view class="name">{{item.name}}</view>
						<view class="more" @click="toCarList(item.order_id)">更多<text class="iconfont">&#xe67f;</text></view>
					</view>
					<view class="group-list" v-for="(titem,tindex) in item.cars" :key="tindex">
						<view class="item-tit">车辆{{tindex+1}}							
						</view>
						<view class="item-col">
							<view class="label">车牌号</view>
							<view class="info">								
								<block>{{titem.carnumber}}</block>
							</view>
						</view>	
						<view class="item-col">
							<view class="label">长度</view>
							<view class="info">								
								<block>{{titem.size}}</block>
							</view>
						</view>
						
						<view class="item-col">
							<view class="label">车型</view>
							<view class="info">								
								<block>{{titem.cartype}}</block>
							</view>
						</view>		
						<!--
						<view class="item-col">
							<view class="label">特殊车型</view>
							<view class="info">								
								<block>{{titem.specialcar}}</block>
							</view>
						</view>-->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	/**
	 * 景点门票订单详情旅客信息
	 * 
	 */
	export default {
		name: 'stOrderFerryCar',
		props: {
			suits:{
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {}
		},
		methods:{
			// 前往游客列表
			toCarList(orderid){
				this.$emit('carlist',orderid);
			}
		}
	}
</script>

<style lang="scss">
	.module-block{
		padding: 0 24rpx;
		margin-bottom: 20rpx;
	}
	.module-info{
		padding: 28rpx 24rpx 0;
		border-radius: 20rpx;
		background-color: $uni-bg-color;
		.module-title{
			@extend .justifyspacec;
			line-height: 1.24;
			font-size: 40rpx;
			font-weight: bold;
			.checkDetail{
				@extend .alignItems;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				font-weight: normal;
				line-height: initial;
			}
		}
		.module-group{
			padding: 20rpx 0;
			.group-item{
				.ticket-name{
					@extend .justifyspacec;
					align-items: flex-start;
					padding: 18rpx 0 18rpx 18rpx;					
					background: linear-gradient(-270deg, #dff6e5 0%, rgba(255,255,255,0) 100%);
					border-radius: 16rpx;
					margin-top: 20rpx;
					.name{
						width: 80%;
						font-size: $uni-font-size-base;
						color: #333;
						font-weight: bold;
						line-height: 1.4286;
					}
					.more{
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
					}
				}
				.group-list{
					padding: 20rpx 0;
					font-size: 40rpx;
					.item-tit{
						@extend .alignItems;
						font-weight: bold;
						line-height: 1.6;
						margin-bottom: 12rpx;
						.paper,
						.must{
							padding: 0 6rpx;
							height: 36rpx;
							background-color: #486ec3;
							border-radius: 6rpx;
							margin-left: 8rpx;
							font-size: 20rpx;
							line-height: 36rpx;
							color: $uni-text-color-inverse;
						}
						.must{
							background-color: #fdd;
							color: #ff4a50;
						}
					}
					.item-col{
						@extend .alignItems;
						margin-bottom: 10rpx;
						font-family: Arial, Helvetica, sans-serif;
						color: #085ce2;
						.label{
							width: 230rpx;
							color: $uni-text-color-grey;
						}
					}
				}
			}
		}
	}
</style>
